<template>
	<view class="sample-container">
		<!-- 顶部栏 -->

		<scroll-view class="form-scroll" scroll-y>
			<view class="form-list">
				<view class="form-item">
					<text class="form-label">抽样小计：</text>
					<input class="form-input" v-model="form.total" type="number" placeholder="请输入" />
				</view>
				<!-- <view class="btn-group"> -->
				<view class="spec-row">
					<text class="spec-label" style="visibility:hidden">抽样小计</text>
					<input class="spec-input" value="比例" style="text-align: center;"></input>
					<input class="spec-input" value="重量" style="text-align: center;"></input>
				</view>
				<view class="spec-row" v-for="(item, idx) in specList" :key="item.label">
					<text class="spec-label">{{ item.label }}</text>
					<input class="spec-input" v-model="item.ratio" type="number" placeholder="比例" />
					<input class="spec-input" v-model="item.weight" type="number" placeholder="重量" />
				</view>
			</view>
		</scroll-view>
		<view class="bottom-btns">
			<button class="bottom-btn" @click="prevStep">上一步</button>
			<button class="bottom-btn" @click="nextStep">下一步</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				form: {
					total: 10
				},
				mode: 'ratio', // 'ratio' or 'weight'
				specList: [{
						label: '100/200B:',
						ratio: 30,
						weight: 30
					},
					{
						label: '200/300C:',
						ratio: 5,
						weight: 5
					},
					{
						label: '300/500D:',
						ratio: 15000,
						weight: 15000
					},
					{
						label: '500/800E:',
						ratio: 15000,
						weight: 15000
					},
					{
						label: '800/1150Q:',
						ratio: 15000,
						weight: 15000
					},
					{
						label: '1150以上J:',
						ratio: 15000,
						weight: 15000
					}
				]
			}
		},
		methods: {

			prevStep() {
				uni.navigateBack()
			},
			nextStep() {
				uni.navigateTo({
					url: '/pages/home/gongchang/live-fish'
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.sample-container {
		background: #fff;
		min-height: 100vh;
		padding-bottom: 120rpx;
	}

	.header-bar {
		display: flex;
		align-items: center;
		height: 80rpx;
		border-bottom: 1rpx solid #eee;
		margin-bottom: 10rpx;
	}

	.back-btn {
		font-size: 40rpx;
		color: #3b6ca8;
		margin-right: 20rpx;
		width: 60rpx;
		text-align: center;
		cursor: pointer;
	}

	.header-title {
		font-size: 30rpx;
		font-weight: bold;
		color: #333;
	}

	.form-scroll {
		max-height: 70vh;
		overflow-y: auto;
	}

	.form-list {
		width: 100%;
		padding: 0 20rpx;
	}

	.form-item {
		display: flex;
		align-items: center;
		margin-bottom: 24rpx;
		margin-right: 100rpx;
	}

	.form-label {
		width: 180rpx;
		font-size: 26rpx;
		color: #333;
		text-align: right;
		margin-right: 12rpx;
		flex-shrink: 0;
		line-height: 60rpx;
	}

	.form-input {
		flex: 1;
		height: 60rpx;
		border: 1rpx solid #a6d3ff;
		border-radius: 10rpx;
		padding: 0 16rpx;
		font-size: 30rpx;
		background: #f7f7f7;
		color: #333;
	}

	.btn-group {
		display: flex;
		justify-content: center;
		margin-bottom: 24rpx;
		gap: 30rpx;
	}

	.switch-btn {
		width: 30vw;
		height: 70rpx;
		background: #e6f0fa;
		color: #3b6ca8;
		border: none;
		border-radius: 12rpx;
		font-size: 26rpx;
	}

	/* .switch-btn.active {
		background: #3b6ca8;
		color: #fff;
	} */

	.spec-row {
		display: flex;
		align-items: center;
		margin-bottom: 18rpx;
	}

	.spec-label {
		width: 140rpx;
		font-size: 26rpx;
		color: #333;
		text-align: right;
		margin-right: 8rpx;
		flex-shrink: 0;
	}

	.spec-input {
		width: 30vw;
		height: 60rpx;
		border: 1rpx solid #a6d3ff;
		border-radius: 8rpx;
		padding: 0 8rpx;
		font-size: 30rpx;
		background: #f7f7f7;
		color: #333;
		margin-right: 16rpx;
	}

	.bottom-btns {
		display: flex;
		justify-content: space-around;
		position: fixed;
		left: 0;
		bottom: 20rpx;
		width: 100vw;
		z-index: 10;
	}

	.bottom-btn {
		width: 40vw;
		height: 70rpx;
		background: #a6d3ff;
		color: #fff;
		border: none;
		border-radius: 12rpx;
		font-size: 28rpx;
		margin: 0 10rpx;
	}
</style>